<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-row>
          <el-col :span="4">
            <el-form-item label="只查看当前周期：" prop="currentPeriod">
              <el-switch v-model="search.currentPeriod" class="drawer-switch"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="周期：" prop="period">
              <el-select
                :disabled="search.currentPeriod"
                v-model="search.period"
                value-key="value"
                filterable
                clearable
              >
                <el-option
                  v-for="item in controlData.periods"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名：" prop="userName">
              <el-input :disabled="search.userName" v-model="search.userName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="margin-top: -2px">
              <el-button type="primary" @click="searchQuery">查询</el-button>
              <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      keyProp="recordId"
      menuType="text"
      formRefs="userRecordForm"
      :data="query"
      :formOptions="{ labelWidth: '120px' }"
      :showView="false"
      :showCheckbox="false"
      :showDelete="false"
      :showEdit="false"
      :isCustomForm="true"
      :textMap="{ add: '创建用户考核记录' }"
      :modalOptions="{ height: 630 }"
    >
      <qm-table-column field="userName">用户名</qm-table-column>
      <qm-table-column field="departmentName">部门</qm-table-column>
      <qm-table-column field="period">周期</qm-table-column>
      <qm-table-column field="scores">分数</qm-table-column>
      <qm-table-column field="subScores">扣分</qm-table-column>
      <qm-table-column field="addScores">加分</qm-table-column>

      <template v-slot:moreBtn="{ row }">
        <el-button @click.native="getDetailList(row)" size="mini" type="text">明细</el-button>
        <el-button @click.native="createKpiApply(row)" size="mini" type="text">评分</el-button>
      </template>

      <template v-slot:form="{ model, models, controlData }">
        <el-tabs style="height: 500px;">
          <el-tab-pane label="考核项信息">
            <el-form
              class="qm-table-form"
              ref="userRecordForm"
              label-width="120px"
              :model="model"
              :rules="rules.userRecordForm"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户：" prop="userId">
                    <el-select
                      v-model="model.userId"
                      value-key="value"
                      filterable
                      remote
                      clearable
                      placeholder="请输入关键词"
                      :disabled="pageAction != 'create'"
                      :remote-method="remoteMethod"
                    >
                      <el-option
                        v-for="item in users"
                        :key="item.userId"
                        :label="`${item.label}  (${item.loginId})`"
                        :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="周期：" prop="period">
                    <el-select
                      v-model="model.period"
                      value-key="value"
                      filterable
                      clearable
                    >
                      <el-option
                        v-for="item in controlData.periods"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="textarea">
                    <el-input type="textarea" :rows="2" v-model="model.remark"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-tab-pane>
        </el-tabs>
      </template>
    </qm-table>

    <el-dialog title="查看考核明细列表" :visible.sync="detailDialogVisible" @closed="detailDialogClose">
      <qm-table
        class="detailDialog"
        ref="qmTable"
        v-if="detailDialogVisible"
        :urls="{ query:'/eip/kpi/apply/query' }"
        :beforeQuery="beforeQuery"
        :showToolbar="false"
        :showCheckbox="false"
        :showMenu="false"
      >
        <qm-table-column field="normName">考核指标</qm-table-column>
        <qm-table-column field="normCode">指标编码</qm-table-column>
        <qm-table-column field="scoresType" :renderFunc="renderScoresType">考核类型</qm-table-column>
        <qm-table-column field="scores">分数</qm-table-column>
        <qm-table-column field="applyUserName">申请人</qm-table-column>
        <qm-table-column field="remark">情况说明</qm-table-column>
      </qm-table>
    </el-dialog>

  </div>
</template>

<script>
  import Controller from "@/libs/framework/controller";
  import request from "@/utils/request";

  export default class Instance extends Controller {
    onBeforeInit() {
      this.urls = {
        query: [{url: "/eip/kpi/userRecord/query", method: "post"}],
        save: "/eip/kpi/userRecord/save",
        entity: "/eip/kpi/userRecord/getEntity",
        model: "/eip/kpi/userRecord/getListModel",
      };
    }

    mixin() {
      return {
        data() {
          return {
            search: {
              currentPeriod: true,
            },
            detailDialogVisible: false,
            row: {},
            rules: {
              userRecordForm: {
                userId: [{required: true, message: "请选择用户", trigger: "blur"}],
                period: [{required: true, message: "请填写周期", trigger: "blur"}],
              }
            }
          }
        },
        methods: {
          renderScoresType(data, row, column) {
            let find = this.super.$util.find(
              this.controlData.scoresTypes,
              (item) => {
                return item.value === data;
              }
            );
            return (find || {}).key;
          },
          getDetailList(row) {
            this.row = row;
            this.detailDialogVisible = true;
          },
          createKpiApply(row) {
            let url = `/workflow/kpi/create?action=processStart&appCode=kpi_apply&userId=${row.userId}&_r=${new Date().getTime()}`;
            this.$root.openModal(url);
          },
          beforeQuery(parmas) {
            parmas.query.recordId = this.row.recordId;
            parmas.query.applyStatus = "APPROVED";
          },
          detailDialogClose() {
            this.detailDialogVisible = false;
            this.row = {};
          },
          remoteMethod(query) {
            request({
              url: "/admin/sysRole/setUsers/userSelect2",
              method: "get",
              params: {term: query},
            })
              .then((r) => {
                if (r && !r.initMessage) {
                  this.users = r.data.map((m) => {
                    return {
                      value: m.userId,
                      userId: m.userId,
                      label: m.userName,
                      loginId: m.loginId,
                    };
                  });
                } else {
                  reject(r.initMessage || "数据请求失败");
                }
              })
              .catch((e) => {
                reject(e);
              });
          },
        },
        created() {
          this.remoteMethod();
        }
      }
    }
  }
</script>

<style scoped>

</style>
